import React, { Component } from "react";
import { Modal, Divider, Input } from "antd";
import TreeLeft from "./TreeLeft";
import TableList from "./TableList";

const { Search } = Input;

class AddUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "身份证号",
          dataIndex: "idCard",
          key: "idCard",
        },
        {
          title: "所属机构",
          dataIndex: "organization",
          key: "organization",
        },
        {
          title: "性别",
          dataIndex: "gender",
          key: "gender",
        },
        {
          title: "身份类型",
          dataIndex: "idType",
          key: "idType",
        },
        {
          title: "岗位情况",
          dataIndex: "station",
          key: "station",
        },
      ],
    };
  }

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };

  handleOk = () => {
    const { handleAdd = () => {} } = this.props;
    handleAdd(false);
  };

  handleCancel = () => {
    const { handleAdd = () => {} } = this.props;
    handleAdd(false);
  };

  render() {
    const { visible = false } = this.props;
    const { columns } = this.state;
    const dataTable = [];

    for (let i = 0; i < 12; i += 1) {
      const data = {
        key: i,
        name: i,
        idCard: "410603199209894356",
        organization: "章区微信、app",
        gender: "男",
        idType: "100257000@qq.com",
        station: "在岗",
      };
      dataTable.push(data);
    }

    const rowSelection = {
      // onChange: (selectedRowKeys, selectedRows) => {
      //   console.log(
      //     `selectedRowKeys: ${selectedRowKeys}`,
      //     "selectedRows: ",
      //     selectedRows,
      //   );
      // },
      getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        // name: record.name,
        name: "record.name",
      }),
    };

    return (
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        width={1081}
        bodyStyle={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
        }}
      >
        <div>
          <TreeLeft />
        </div>
        <Divider type="vertical" style={{ height: 693 }} />
        <div>
          <div style={{ textAlign: "right" }}>
            <Search
              placeholder="搜索"
              // onSearch={value => console.log(value)}
              style={{ width: 272, marginBottom: 16 }}
            />
          </div>

          <TableList
            rowSelection={rowSelection}
            columns={columns}
            data={dataTable}
            rowKey="handleLogId"
          />
        </div>
      </Modal>
    );
  }
}

export default AddUser;
